import React from 'react';
import Title from 'Page/CommonComponents/Title';
import Api from 'Utils/api';
import DOCUMENT_TYPE from 'Constants/documentType';
import dialog from 'Utils/dialog';
import { RESOURCE_HOST } from 'Constants/config';
import { connect } from 'react-redux';
import * as routerAction from 'react-router-redux';
import { getCurrentHeight } from 'Utils/index';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import './../VRPage/index.scss';

const PAGESIZE = 10000;

class VRPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      totalCount: 0,
      currentPage: 1
    };
    this.renderVR = ::this.renderVR;
  }
  componentWillMount() {
    this.initList();
  }
  componentDidMount() {
    const self = this;
    this.mySwiper = new Swiper('.swiper-container', {
      paginationClickable: false,
      centeredSlides: true,
      slidesPerView: 2,
      // initialSlide: 1,
      watchActiveIndex: true,
      grabCursor: true,
      autoplay: 10000,
      autoplayDisableOnInteraction: false,
      loop: true,
      direction: 'vertical',
      preventClicks: false,
      height: window.innerHeight - document.getElementById('title-wrap').clientHeight,
    //  followFinger: false,
/*      breakpoints: {
        320: {
          spaceBetween: 20,
        }
      }, */
      onClick: (swipper) => {
        this.props.dispatch(routerAction.push(`/video/detail/${self.state.dataSource[swipper.realIndex].id}`));
      },
    });
  }
  handleMove() {

  }
  initList() {
    const { currentPage } = this.state;
    const query = {};
    query.limit = PAGESIZE;
    query.offset = (currentPage - 1) * PAGESIZE;
    const api = new Api({
      method: 'GET',
      path: `/documents/user/list/${DOCUMENT_TYPE.VIDEO}`,
      query,
      success: (json) => {
        this.setState({
          dataSource: json.data_list,
        }, () => {
          this.renderVR();
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  renderVR() {
    const { dataSource } = this.state;
    for (let i = 0, len = dataSource.length; i < len; i++) {
      const node = `
      <div class="swiper-slide">
        <div class="swiper-content-wrap">
          <div class="swiper-content">
            <div class="swiper-title">${dataSource[i].title}</div>
             <div class="swiper-img" id="test">
               ${
                  dataSource[i].thumbnail_id ?
                    `<img src=${RESOURCE_HOST}${dataSource[i].thumbnail_id} alt="" class="img" />` : ''
                }
               <img src="images/icon_video_play.png" class="play" alt="">
             </div>
          </div>
        </div>
      </div>
      `;
      this.mySwiper.appendSlide(node);
    }
    this.mySwiper.updateSlidesSize();
    const imgArr = document.getElementsByClassName('img');
    for (let j = 0, len = imgArr.length; j < len; j++) {
      imgArr[j].setAttribute('height', `${document.getElementById('test').offsetHeight}px`)
    }
  }
  render() {
    const height = `${getCurrentHeight(125)}rem`;
    return (
      <div className="vr-page">
        <Title title="科普宣传" />
        <div className="swiper" id="swiper" style={{ height }}>
          <div className="swiper-container">
            <div className="swiper-wrapper" />
          </div>
        </div>
      </div>
    )
  }
}
function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}
export default connect(mapStateToProps)(VRPage);
